import React from "react";
import { Row, Col, Card, Form, Input, Button, Checkbox, Spin } from "antd";
import { connect } from "react-redux";
import {loginAsync} from '@/action'
  
function Login(props) {
  const onFinish = (values) => {
    // console.log('Success:', values);
    props.loginAsync(values,props.history)
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <Row align="middle" style={{ height: "100vh", background: "#d8d8d8" }}>
      <Col span={8} offset={8}>
        <Spin spinning={props.user.isLoading}>
          <Card title="Card title" bordered>
            <Form
              name="basic"
              labelCol={{
                span: 6,
              }}
              wrapperCol={{
                span: 17,
              }}
              initialValues={{
                remember: true,
                username:'张三丰',
                password:'123'
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="账号"
                name="username"
                rules={[
                  {
                    required: true,
                    message: "请输入账号",
                  },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="密码"
                name="password"
                rules={[
                  {
                    required: true,
                    message: "请输入密码",
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item
                name="remember"
                valuePropName="checked"
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Checkbox>记住密码</Checkbox>
              </Form.Item>

              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Button type="primary" htmlType="submit">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </Spin>
      </Col>
    </Row>
  );
}

export default connect(({user})=>({user}),{loginAsync})(Login)
